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ABSTRACT 



This study examined the design, aesthetics, and 
functionality of educational and noneducational Web pages from the 
perspective of visual literacy. Educational Web pages were subdivided into 
K-12 and college/university settings, and the non-education categories 
included commercial, publications and communications, informational and 
cultural, and personal Web pages. Research also evaluated print and online 
materials used by professionals and nonprofessionals to create these Web 
pages. These "how-to" manuals were evaluated for their discussions of: good 
screen design; the use of graphics and icons as communication; backgrounds; 
hypertext; linking; and overall understanding of publishing on the World Wide 
Web. Two evaluation instruments were developed. One contained 21 questions 
for evaluating online and printed resource materials; a second contained 57 
questions that considered both aesthetics and functionality as embedded in 
the categories of design, graphics, text, and color. Initial data analysis 
indicated a wide range of quality among all the sites. Evaluation of printed 
and online materials indicated a strong agreement in the use of how to create 
in HTML language and the technical aspects of using specific image formats 
for World Wide Web publishing. School sites tended to use text rather than 
images to present information; sometimes overuse of backgrounds interfered 
with the overall message. In general, the noneducational sites reflected 
similar quality as the educational sites, with the exception of the 
professionally developed commercial sites which contained animations and 
sophisticated graphics. Those met the criteria for evaluation, but tended to 
target a narrow group of people; some of the Web pages were well -designed and 
met the needs of the general user. The amount of text or graphics used in 
informational home pages was related to the availability of design resources. 
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Abstract 







An analysis of instructional products about creating web pages along with a sampling of home pages 
created by students , teachers, and others leads to suggestions for creating web pages from the perspective of visual 
communication and aesthetics. This paper examines several types of home pages including educational, commercial, 
informational, publications, and personal sites. 

Introduction 

In this popular time of electronic communications and emphasis on using the internet, more and more 
people are creating home pages. The power of the of the World Wide Web (WWW) is in the abiliy to use visual 
communications in a way that is not possible with the standard text of the Internet. Some say that a revolution is 
taking place - a digital revolution and the “most crucial task before us is not putting in place the digital plumbing 
of broadband communications links... but rather one of imagining and creating digitally mediated environments for 
the kinds of lives we want to lead and the sorts of communities we want to have” (Mitchell, 1996, p. 5). One 
alteration of this revolution is the digital environment of the graphical user interface (GUI). This environment, once 
static and linear, has changed. Users relate mutually to screens that are visual, interactive and non-linear (Jones, 

1995). Another transformation is the manipulation of images. Electronic tools allow the user to capture, display, 
distort, enhance, store and print images. These “developing technologies... blur distinctions between actual and 
represented reality...” (Stieglitz, 1995, p 22). 

The Internet, a global network linking millions of people world wide, is a digitally-mediated environment. 

The Internet is made easily accessible through WWW browsers. These interactive browsers, i.e., Netscape, Internet 
Explorer, Mosaic, include informational displays and access tools presented to users in the form of web pages. 

These pages, created in a computer language called HTML (Hypertext Markup Language) contain hyperlinks - 
graphics, buttons, icons, images, colored text, animation, video — that allow the users to browse the contents of the 
page, search and retrieve information, and link to other web pages around the world. Recent developments in on-line 
communication tools provide the ordinary user the ability to create interactive pages and offer course delivery on the 
WWW. “The technology to transfer and transmit graphic and other forms of visual communication instantaneously 
around the globe has made available for communication, a large audience, which is often visually illiterate” 
(Saunders, 1994, p 186). 

Purpose 

The purpose of the study was twofold: (1) to look at the design, aesthetics, and functionality of educational 
and non- educational web pages from the perspective of visual literacy and, (2) to evaluate printed and on-line 
materials that are used as resources by professionals and nonprofessionals to create these web pages. These “how to” 
manuals were evaluated for their discussion of good screen design, the use of graphics and icons as communication, 
backgrounds, hypertext, linking, and overall understanding of publishing on the WWW. 
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The web pages were divided into major categories and sub-categories. The educational categories included K-12 
schools and colleges/universities. The non-educational categories included commercial, publications and 
communications, informational and cultural, and personal web pages. 

The subject of images, graphics, and icons is critical. From a technical aspect, if an image is memory 
intensive and being viewed with a low speed modem or limited machine capacity, the images load slowly. In 
creating web pages, the designer must convey to the user ways to access hyperlinks. This is sometimes done 
through icons, images, or text that act as interactive buttons. When the user clicks on these hyperlinks they are 
connected to new information, other web sites, or further resources. To be interactive the buttons must be properly 
coded in HTML, thus, guiding the user. 

? The “business of creating web sites” is rampant. Many services, both on-line and printed references offer 
“how to” construction of web pages. However, little thought is given to the overall image of the page. Usually the 
focus is on the HTML language. 

Background 

The explosion of the WWW as an informational tool on the Internet (Descy, 1994) provides students and 
teachers, at all levels of education, with up-to-date information and continuous access to resources world wide. In 
effect, the Internet is a virtual library of information (Doyle, June, 1994). 

Most recently, the development of electronic utilities provided through WWW links, growth of software 
that contains HTML readers, and publishing of on-line and printed technical manuals have provided ordinary 
computer users with the ability to easily access, create, and publish web pages. In particular, K-12 educators have 
begun to create web pages as a way to provide information about their schools and classrooms, display student work, 
provide links for student-generated research, and link with other schools to allow students to collaborate with one 
another in learning activities i.e., creative writing and problem solving. 

Colleges and universities also use web pages as marketing strategies to provide information about the 
programs and courses they offer, as a way for students to apply to these programs or to register for courses. In 
addition, web pages are being created by college and university professors to offer courses via the WWW. 

The increased ability to create web pages that use graphics, icons, and images to communicate a problem 
comes at a time when “our educational systems have reduced the number of courses in art education and.... the 
availability of courses in visual literacy that would advance seeing and interpreting what is seen are only recently 
finding support in the educational system (Saunders, 1994, p 187). Thus, many educators and students creating 
web pages have had little guidance concerning the visual design elements. The myriad of technical manuals provide 
information about how to create web pages but they don’t specifically address the necessary design elements that will 
help the web page communicate clearly and appear aesthetically pleasing. 

Visual design is a significant factor in the development of web pages. The “...visual medium is. ..superior 
because it offers structural equivalents to.. ..objects, events, relations and visual elements that can be “organized 
according to readily definable patterns” (Amheim, 1969, p. 232). 

Visual representations in the form of icons, graphics, and images are defined in two- and three-dimensional 
space as compared to the one-dimensional space of text (1969). According to Saunders (1994, p. 186-187), these 
visual representations (graphics) function as a communication tool because they are: 

• based on things that are seen 

• appeal to our emotions as well as intellect 

• convey a single overwhelming meaning or message 

• communicate information 

• comprise a language and grammar of which most of us are ignorant 

• are not designed to encourage feedback from the audience 

Effective web pages contain good screen design, graphics, icons, background images, image maps, and 
hypertext. The construction of web pages involves an understanding of the use of these elements. This 
understanding is inherent in the aesthetic and technical function of informational and form design as well as graphical 
user interfaces. 

“Good screen design uses the visual to portray the message to the reader.” Text with white space, the 
position of graphics, mixture of text and graphics, consistent placement of navigational buttons, standard icons, and 
borders act as visual aids to the user (Knupfer, 1994, p. 216). 

Graphics are used to make visual statements - to communicate visually. Visual statements are “an object 
or collection of objects created or assembled for the purpose of being seen and experienced” (Curtiss, 1987, p. 4). 
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Visual statements contain visual symbols that include shape, color, dot, line, and style. (Such statements also 
include form — the expressed ideas and conveyed meanings behind the elements that give support to the 
communication of the visual statement (Seels, 1994). To effectively communicate with visuals, creators of web 
pages must consider the simplicity and clarity of the images, balance, harmony and organization of the text and 
images, aspects of framing, and emphasis color, texture, and space. (Thompson, 1994). 

Icons to serve as “reference points. ...for searching and retrieving information” (Ma, 1995, p. 33). Icons 
also can be used as signs. Signs are “...organized into systems of meanings or codes” (Muffoletto, 1994). Signs 
can also be influenced by social and cultural meanings. Ma (1994) studied the meanings of icons on the WWW 
pages of 150 United States libraries. A sample of icons Ma found included an icon depicting a web overlaid with a 
magnifying glass to depict Internet resources, book-shaped icons that represent on-line catalogs, periodicals, etc., and 
icons that portray a highway to catalog Internet resources. Semiotic analysis of icons indicated that familiar icons 
used to index traditional library resources were being used to index resources indicative to the resources on the 



Backgrounds and background images are important design components. Used appropriately, background 
images can enhance the foreground icons, graphics, and text. Many novice designers include these images to “add a 
theme.. .or because they fill up unused space” (Siegel, 1996, p. 131). 

Image maps (complex images that produce multiple hyperlinks) contain visual, navigational, and practical 
characteristics. Visual characteristics are clues that are recognized by the viewer and meet the viewer's expectations 
pertinent to the information. Navigational characteristics include the viewer recognition and initiation of linked 
information being used to index resources indicative to the resources on the WWW. 

Practical characteristics include technical aspects such as image load time, background and special effects not 
cluttering the vision of the viewer, and whether graphics fit the target audience (Cochenour, Lee, and Wilkins, 
1995). Cochenour and others (1995) evaluated nine WWW sites that contained image maps for visual, navigational, 
and practical characteristics. Nine viewers evaluated the sites and “they seemed to judge the degree of appeal by how 
easily they could get to information** (p. 170). The web sites receiving the highest ranks contained simple images 
and a well-ordered layout with clearly defined hot spots and a limited number of choices. Hypertext links are critical 
to web page design. These links are words or phrases that are underlined and colored to denote a link to more 
information or other web sites. The conventional use of color displays the “un visited” links as blue and the “visited” 
links as purple. 

This study investigated the use of these design elements in software and printed materials that tell how to 
create web pages and in the web pages created by students and teachers in elementary, middle, and high schools as 
well as those in colleges and universities. 

Methodology 

For this research the web sites were categorized into two main groups, educational and noneducational. 
Then each of those larger categories were further subdivided. Figure 1 shows the organization of the educational web 
page site categories and Figure 2 shows the organization of the non-educational web page site categories. 

Figure 1. Educational Web Site Categories 
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Figure 2. Non-Educational Web Site Categories 
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Development of Evaluation Instrument 

Considering there is no previous research about designing web pages from the perspective of visual literacy, 
the researchers began by examining the literature for checklists that related to the basic elements of visual 
statements, GUI design, hypermedia design, and publishing on the WWW (Curtiss, 1987; Lucas, 1991; Schwier, 
1991, Cates, 1992, Tolhurst, 1992; Wiggins, 1995). From these checklists two evaluation instruments 
were developed and refined based upon a six-point Likert-type scale. One instrument contained 21 questions for 
evaluating on-line and printed resource materials. Examples of the evaluation criteria in this instrument are: 

• Contains introductory information about the general WWW environment 

• Use of browsers 

• Explanations of image formats (tiff, pict, jpeg, gif, etc.) 

• Use of color 

• Links 

• Publishing on the WWW 

• Examples provided 

• Emerging trends 

A second evaluation instrument contained 57 questions that were embedded in the categories: design, 
graphics, text, and color. These categories were divided into aesthetics and functionality. These questions were used 
for evaluating K-12 schools, and college/university web sites. This instrument was also used to evaluate 
informational and cultural as well as personal pages. A sample of the evaluation criteria include: 

• Design — aesthetics 

• Design elements are aesthetically consistent (consistent headers, background, font sizes, etc.). 

• The page has appropriate white space. 

• The background contributes to the overall design. 

• Design -- functionality 

• The design appears to be created for lay computer users not experts. 

• The message is clear. 

• The message is concise. 

• The site appears to be current. 

• A text only option is available when large graphics load slowly. 

• The links function properly. 

• Graphics load with reasonable speed. 



• Graphics — aesthetics 

• The graphics do not distract the user from the main message of the page. 

• The graphics that are intended to be buttons look like buttons (easily recognizable as buttons) 

• The graphics that are not intended to be buttons do not look like buttons (you do not do false clicks hoping 
to go somewhere). 

• Graphics are easily interpreted. 

• Graphics — functionality 

• The site uses appropriate thumbnail graphics (user doesn’t need to use time and memory loading in memory 
intensive graphics). 

• Graphics enhance the message of the page. 

• Text — aesthetics 

• The properties of the text (font, style, size, color, pattern, etc.) are aesthetically appealing. 

• The color of the text is aesthetically compatible with other design elements on the page. 

• The layout of the text is aesthetically pleasing. 

• Text -- functionality 

• The color of the text does not distract the user from the main message of the page. 

• The layout of the text does not distract the user from the main message of the page. 

• Color - aesthetics 

• Color changes are used to convey a message (visited links, happy-sad, day-night, timed elapsed, etc.) 

• The design makes use of warm (red, orange, yellow) and cool (purple, blue, green) colors. 

• Color — functionality 

• The design of colors considers the age of the final user. 

• The color scheme is appropriate for color-blind users. 

• The background color is aesthetically pleasing. 

WWW Site Selection 

Sites were randomly selected from the web. Various descriptors, such as, creating web pages, HTML, web 
page design, and so on, were used in various search engines to illicit web sites containing resources about how to 
create web pages. An initial list of publishers who produce information about how to design and create web pages 
was constructed based upon a search of on-line, bookstore, and library materials. Over 100 electronic sites and 25 
printed manuals were evaluated. The web page sampling source for schools and colleges/universities was gathered 
from the Yahoo search engine using the education category. 

Twenty sites were randomly selected for each elementary, middle school, high school, college and university 
(n = 160). The K-12 web sites included both public and private United States schools. Higher education sites 
included public/private colleges and universities in the United States and four countries around the world. 

Independent Evaluators 

Four graduate students majoring in educational technology at a major mid-western university evaluated the 
commercial, informational, cultural, on-line and printed materials, and personal web sites. K-12 school and 
college/university web sites were evaluated by an associate and an assistant professor of educational technology. 
Both professors teach the use of the Internet and the WWW to graduate students. 

Results 

Initial data analysis of graphics, text, color, and design characteristics within the components of aesthetics 
and functionality indicates a wide range of quality in all the sites. This report contains qualitative descriptions that 
were used to help determine numerical scores. Quantitative analysis is in progress. 

Resource Materials 

Evaluation of the printed and on-line materials indicates a strong agreement in the use of how to create in 
HTML language and the technical aspects of using specific image formats (gif, tiff, jpeg, mpeg) for WWW 
publishing. Examples of these printed and on-line publications include: 

Fry, A. and Paul, D. (1995). How to publish on the internet. New York, NY: Warner Books 
Danesh, A. (1996). Teach yourself web page design. Indianapolis, IN: Sams.net Publishing 
Home page creator [On-line], www.angelfire.com/freepages/create.html 
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Netamorphix [On-line], http://trace.wisc.edu/TEXT/GUIDELNS/HTMLGIDE/htmlfull html 
Lynch, P. (1995). Yale C/AIM WWW style manual [On-line], 
http://mfo.med.yale.edu/caim/printinfo.html 

Niederst, J. & Freedman, E. (1996). Designing for the web: Getting started in a new medium. Sabastopol 
CA : O’Riley 7 Associates, Inc.. 

Rogers, S. & Wise, A. (1996). Home page beautiful. Radiant Productions. [On-line] 
http://chck.com.av/click/v03/deconstruction/index.html 

Wilson, S. (1995). World wide web design guide: Learn to design professional web pages. Indianapolis 
IN: Hayden Books. 

Although there is an abundance of resources for learning how to compose WWW pages from a technical 
standpoint, there is little agreement about the inclusion of elements of good screen design, appropriate size of 
graphics, use of icons for navigational purposes, and designing the screen as a portrait. That is, the message is the 
object and the portrait is the screen. Few resources in print and on-line, choose to address this type of information. 
In the cases that did, the authors discussed the use and aesthetics of images, backgrounds, text, graphics functionality 
and emerging trends. These authors usually provide the user with examples in the printed publication that correlate 
to examples in the on-line publications: 

Horton, W., Taylor, L., Ianacio, A. & Hoft, N. (1996). The web page design cookbook: All the 
ingredients you need to create 5 star web pages. New York, NY: John Wiley & Sons, Inc. 

Horton, W. (1991). Illustrating computer documentation. New York, NY: John Wiley & Sons, Inc. 
Siegel, D. (1996). Creating Killer Web Sites. Indianapolis, IN: Hayden Books. [On-line] 

http://www.killersites.com. 

Educational Sites 

Evaluation of school sites indicates a strong use of backgrounds that tend to distract from the overall 
message. School sites tend to use text rather than images to present information. They use text whose properties 
(color, font, style, size) are difficult to read because the background interferes. Also, they use text that is targeted for 
adult users rather than the age of students attending these schools. Examples of these sites include: 

Bethesda-Chevy Chase High School [On-line], www.mcps.kl2.md.us/schools/bcchs/ 

Chaffee Elementary School [On-line]. www.traveller.com/-lpearce/Chaffee/Chaffee.html 

Fall Brook Union High School [On-line]. sd.znet.com/-schester/FUHS/index.html 

Hardyston Township Elementary School [On-line], www.garden.net/users/hardyston/non-enhanced.html 

Longfellow Elementary School [On-line] www.nothinbut.net/-dhannah/xlongfel.html 

Orange Grove Elementary School [On-line] www. awod. com/ gallery/ rwav/ oge/ 

Quail Run Elementary School [On-line] www. sped, ukans. edu/ -scottk/ qr/ 

Examples of K-12 schools whose web sites contain good screen design, graphics that are aesthetically and 
functionally appropriate include: 

Brookfield Central High School [On-line], www.axisnet.net/-bchs/ 

Burke, Harry A. High School [On-line]. www.esul9.kl2.ne.us/burke/BHS.html 
Kyerene Akimel A-Al Middle School [On-line]. 204.17.16.101/Akimel/ams.html 
Robinson, Andrew Elementary School [On-line], www.rockets.org/ 

A further analysis of school sites indicates that the functions of graphics are not always apparent. Graphics 
which were not intended to be buttons looked like buttons, and sometimes graphics which were buttons did not look 
like buttons, thus confusing the user. 

Whereas K-12 schools use web sites as a way of introducing themselves to the WWW and promoting their 
school community, colleges and universities use their web sites for a variety of purposes, i.e., new student 
application, on-line registration, promotion, on-line courses, announcements, faculty and student homepages. Data 
for colleges and universities indicates a strong agreement in the areas of good screen design, use of color, white 
space, and icons that are effective navigational tools. Examples include: 

Arizona State University [On-line], www.asu.edu/asuweb/ 

College of the Menominee Nation[On-line] www.menominee.com/ 
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Design functionality data regarding the updating of information, clues that reflect the information size, or 
provide a text only option when memory-intensive graphics are present indicates strong disagreement among all 
many K-12 schools and colleges and university web sites. However, many commercial, personal, and educational 
web pages contain indications of last update, informational size or provide a text option. 

The Santa Monica High School web site is a graphically sophisticated site 
(http://coke.physics.ucla.edu/laptag/SMHS.dir/). Information about the school ranges from a virtual tour, to 
schedules for lunch, sports, and classes. The home page is constructed with frames and a banner that have a 
professional appearance. A sound file loads auto with the home pages and this is very annoying. It takes along time 
to load and was distorted by the slow connection. The virtual tour was mostly done in text, which was a surprise. 
Although one would expect graphics, the text was informative and each site on the tour was described in paragraphs 
with appropriate links. Navigation is logical and easy to follow. 

The site give the impression that teams of students are responsible for various sections of it. For example, 
the sports section begins with a black background and a large image map that loads in a puzzling way. Small circles 
eventually appear around the logo and when the cursor is moved over the circles, labels pop up. When a label is 
clicked, it links to another page. Some users might find this confusing, but there is also a menu bar that is 
available, so people can use that. The menu bar remained present on all screens, so the user was not likely to get 
lost. 

The colors of the home page are blue and yellow. All pages have an advertisement at the top of the page 
indicated that the site is sponsored in part by different businesses. Overall, this site was a Spielberg-like in 
appearance in that is was very colorful an attractive/ Although the graphics were slow to load, the users were given 
the choice to skip them and select a textual version. The downfall of this page is that typical users will need to have 
a lot of time to load the graphics and are therefore likely to skip the graphic version. This, of course, detracts from 
the visual potential of the WWW. 

The Andrew Robinson Elementary site (http://www.rockets.org/) represents a large, inner-city elementary 
school. This site received a “Florida’s Best” award form the Florida Communities Network. The site was created 
with the leadership of the three teachers and three students, representing a team effort in both content and appearance. 
The home page features a gif image of the school building and from there, users can take a virtual tour. The student 
involvement is evident in the graphic depictions and in the content included. Student drawings are featured 
prominently and the text is appropriately sized. Colors in the drawings are not always well coordinated, but they 
represent what the elementary students have chosen in their art work. The site gives a feeling of energy and 
enthusiasm. 

The majority of the educational sites reflect limited knowledge of design skills in terms of layout, 
aesthetics, interactivity, an general functionality. Much of the material is creative and useful, but the message is 
often lost in the quality of visual communication techniques that are used. 

Noneducational Sites 

In general, the noneducational sites reflect similar patterns of quality as the educaional sites, with the 
exception the commercial sites. The commercial sites range from poor to excellent, and it is apparent that some of 
the commercial sites have access to graphic designers and other professionals who have been trained in the 
construction of interactive computer-based materials that communicate. To use a sports analogy, anyone can figure 
out how to play softball, and those with interest can attempt to coach it, but there is a big difference between the 
winnings of an experienced coach and a novice who has no training. Likewise, the range of skill reflected in the 
WWW home pages ranges reflects all levels from beginners to professionals. 

Commercial Sites 

The commercial sites developed by professionals contained animations and sophisticated graphics which met 
the criteria for evaluation but they tended to target a narrow group of people. For example, product information sites 
can be very technical and difficult for the common user to understand. An example is the About Abbey Camera 
(http://abbeycamera.com/) web page. This site is targeted for general audiences but the navigational icons are not 
consistent and tend to mislead the user as to their use. 

Federal Express (http://fedex.com/), and Land's End (http://www.landsend.com/) are examples of sites that 
target specific users. These sites contain icons and links that guide users who want to find shipping information, 
ship parcels, or order items. The icons are understandable and link to pertinent information about shipping parcels 
and other aspects of the each companies* business. 
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Some of the web pages are well designed and meet the needs of the general user. Examples of such sites are 
those foxKinko's (http://www.kinkos.com/main), JC Penney’s (http://www.jcpenney.com/), and the Ben and Jerry’s 
Ice Cream (http://www.benjerry.com). At these sites, the text and images are matched for meaning, consistently 
used, and appropriate for general adult users. The Idea Enterprises site (http://www.ieaudio.com/webpage/html) has 
some interesting features but it also employs some flashy features that detract from the pages as well. The Kinko’s, 
Ben and Jerry's Ice Cream, and Idea Enterprises sites are discussed in more detail below. 

Graphics at the Kinko ’s site are placed in an informal balance to form a dynamic design The informal 
balance creates a path that directs the visual path of the viewer (Amheim, 1974). Each succeeding graphic object 
leads the viewer to the next object. The use of informal balance requires considerable white space on a page. Near 
the center of the page on the left side there is a large area of white space that forms a void area leaving the viewer to 
wonder what should be there. The white background does provide sharp, clear contrast for the graphics. Short 
blocks of text placed next to the graphic provide a preview of the content on the page that can be accessed by that 
graphic (Horton, 1991). Red type matching the red in the logo is used to call attention to two items on the page. 
Lower case type is used to indicate message of equality with the reader on a conversational level. Color balance in 
the page is achieved by the use of small areas of warm bright colors in the graphics of setting larger areas of the 
graphic's cool colors. Additionally, the logo colors, blue and red, along with a small area of orange are repeated in 
the computer screen of the last graphic of the page. 

The consistently up-to-date web page of Ben & Jerry's Ice Cream Company changes as often as daily to 
acknowledge the holidays, commemorations, and celebrations of our culturally diverse nation. Even though the 
content changes, the banner consisting of the company trademark and signature line, provides the viewer with a 
familiar greeting, much like that of a 

newsletter. The banner, in a smaller size is repeated on each of the succeeding pages. Unlike most commercial 
pages, the introduction features a cultural event or events rather than company information. Each event is illustrated 
with a tasteful graphic or picture. Short blocks of bold or color accented text accompanies each graphic. These 
design features are closely aligned with the recommendations of Horton, Taylor, Ignacio and Hoft (1996) for the 
introductory area of commercial home pages. Effective use of the full color spectrum is accomplished through the 
thin graphic (horizontal rule or swashes) spanning the width of the page and separating sections of the page. 

During the Holiday Season this graphic was a string of multicolored lights, emphasizing the message of the 
opening paragraph and graphic. Rules are used to coordinate page colors and separate sections of the page (Horton, et 
al„ 1996). In January, the event of focus was Martin Luther King Day. Miniature drawings of children, depicting 
various cultures were placed holding hands to form the rule graphic. The same rule graphic through out the page to 
create subject separation and provide color coordination for the various sections headlined with different colors. The 
overall design of the page closely parallels the design of a printed newsletter. Accommodating the large amount of 
information on this page, is possible through the use of creative, well planned, artistic design. While sections of the 
page promote the companies ice cream and frozen products, the pronounced message is one of a culturally aware, 
socially conscious company. 

Idea Enterprises' home page opens with a large, bright purple and black logo on a textured turquoise 
background. The following text is centered just below the logo, "idea enterprises that's advertising, Offering Web 
page development and renovation, Web audio content and radio ad campaigns for your business." Following those 
words is a listing of links to subsequent pages advertising the services available, including one for web page design. 
Phone and e-mail information is displayed below the table. 

At first glance this home page captures the viewers attention. However, a closer look at the site reveals a 
lack of navigational buttons, inconsistent banners on linked pages, and inconsistent use of animated graphics. In her 
book Designing for the Web, Jennifer Niederst emphasizes the need for navigational tools on each page of the site by 
reminding the designer that a user can enter a site at any point (Niederst, 1996). There is no guarantee the person 
viewing the site will arrive by way of the home page and could possibly never arrive at the home page without 
navigational buttons. There are no navigational buttons on the "web page design" page to take the user back to the 
home page or to other pages in the site. Additionally, the banner on this page reads "Simply put... Look around 
our web site. ..seeing." In that line the word "seeing" is in purple type, an indication that it is probably a link, but 
when clicked on, nothing happens. After clicking on the words in purple type scattered through out the page, the 
user will likely conclude these are not links but are possibly a part the message. 

All graphics on this page are centered horizontally and animated. The first is a yellow smiley face that 
appears to be talking. Just below the talking smiley face is a flashing rectangle with a background that changes 
from blue to orange and flashes the words "Click," “Here," "Do It," "Now" in bright yellow type. At the vertical 
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center of the page is an animated picture of a human eye looking from side to side. Next, two short lines of type 
separate the glancing eye from a small rectangular graphic containing a dancing flame on a black background. The 
final graphic on the page is an e-mail icon miming an invitation to contact the company via e-mail. 

Animation does draw attention and stimulate interest but should be used to communicate not to decorate 
(Horton, 1991). The preponderance of animated graphics on this page draws attention to the extent of overpowering 
the advertising message. 

Informational Homes Pages 

It seems that a major difference in the amount of text or graphics used on a page was related to the 
availability of resources to design web pages. This pattern is reflective of the resources available to larger 
communities which have sites usually designed and supported by professional designers. Whereas, the more rural 
sites are maintained by a technical support staff. For example, web pages for major metropolitan areas use more 
graphics, animation, and color throughout the site than sites for rural communities. The more rural or remote a 
community , the greater the use of text to convey the message. Some rural communities that use a number of 
graphic elements on their site, are a regional grouping of several communities that centralized their resources 
(CedarNet; Ames Electronic Village). Also, a majority of military sites initially used graphics on the home page, 
but revert to text on linked pages of information. This pattern possibly follows the military style of training which 
is based upon getting and individual attention and then presenting the information. 

Informational web pages for museums and libraries, which also included zoos and major park associations, 
and special interest also follow this same pattern. A majority of these organizations have resources for design, 
which assist them in marketing themselves with graphical themes, and transferable to the design of web page. 

The structure of the CedarNet (http://www.cedamet.org/navigate.html) home page places a focus on formal 
balance between the main graphic and the text in a horizontal list, this provides ample white space around both the 
graphic and the text. Central tot he home page is the focus on the main graphic, aesthetically pleasing in its use of 
shape, color and realistic images. The graphic is circular in shape with realistic images or pictures of buildings, 
appropriately labeled, representative of the varies functional parts of a local community, this graphic gives the home 
page a friendly, Norman Rockwell hometown message to the user. Each building in the graphic is used as a graphic 
button, linking the user to subheadings of categorized information available in this community. 

The main graphic changes with the seasons of the year. The key graphics and labels remain the same, but 
the graphic changes to represent the them of the four seasons throughout the year. The winter graphic makes use of 
winter scenes and activities, snow, and the use of cool colors (blue, green, purple) and white. Autumn is represented 
in this graphic by the use of more warm colors (red, orange, and yellow) and appropriate activities. For spring and 
summer the main color is green. 

In terms of functionality, the graphic elements and the text list are linked to provide navigational options to 
the user accessing information. Linked pages are appropriately titled and most have the corresponding building 
graphic on the header of the page. But the graphics do not carry over the seasonal as presented on the home pages. 
Also, animation is used in the header graphic on only two of the linked pages: the neighborhood page, and the 
recreation and tourism page. 

The only major inconsistency of this site is the use of background colors on linked pages. The color and 
texture vary from linked page to linked page. The background colors range from green, yellow, white, gray, and a 
pastel spectrum of colors. Also, the layouts on the linked pages vary from horizontal and vertical lists. 

This inconsistency contradicts the CedarNet Web Site Design an Development Committee statement of 
purpose for “maintaining a cohesive, consistent, and attractive web presence in the main structure areas of CedarNet.’* 
CedarNet defines itself as an electronic community dedicated to providing quality community information in 
Northeast Iowa, representing the communities of Waterloo an Cedar Falls. 

The principal design of the Whidbey Island Naval Air Station (http://www.naswi.navy.mil/) web page uses 
a formal balance between the graphic elements. The design places the logo/graphic and title at the top half, and the 
graphical navigation buttons in the lower portion of the page. This creates a portrait view of the page, designed to 
be seen all at once. The layout of the page makes use of appropriate white space around the text and graphic 
elements, which creates an inverted pyramid flow of the viewer eye towards the navigational buttons. 

Information on the home page is concise and labeled to leads the use directly to additional information. The 
title, as a graphic element, is four lines of large centered italic text, arranged in a complementary shape to the 
triangle graphic next to it. Graphical lines, lines a with small graphics element, are used to separate the title and 
navigational areas of the page. The graphic element depicting with these lines shows a jet and exhaust trail moving 
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right and left across the page. These lines are also used on linked pages as a element of the page header to separate 
the title from the page information, or to separate groups of information. Additional thin graphical lines, using a 
pair of “peering** eyes, are used at the bottom of the page as a means of separating and calling attention to important 
information and warnings. 

The focus of the navigational area of the page are the twelve three-dimensional blue-colored buttons. 
Layout is three buttons across the page and four down. The button labels are in a yellow italic text, making good 
use of complementary primary color . Centered text above the buttons indicated a special message in bold, and a 
corresponding list of button labels is below the buttons. 

The shape of the buttons crate a problem of inconsistency with other elements of the page and site, the 
home page navigational buttons are the only three-dimensional graphic on the page. This causes the other graphic 
elements to have a flatten appearance. Also, the buttons on linked pages changes shape from the rectangles to blue 
spheres. A consistent use of shapes and lines would add to the overall appearance of the page. 

Blue is used as the primary color for the graphics and text. Additional uses of color in the graphics include 
shades of cool colors - blue and green, and complementary primary colors of red and yellow. Text used on the 
graphic is white on a blue background. Visited sites on the page, the text listing and the outside edge of the button, 
are highlight in a reddish-brown color. This color may cause problems for colorblind users. 

Text on the home page is used at an appropriate size and style to read easily. But, the text on the linked 
pages appears smaller and more difficult to read due to added white space or changes in the color of the background 
(white). An increase in the text size on these pages would add to the readability to the site. 

The National Center for Fathering web page (http://www.fathers.com/) presents a formal balance of the 
graphic elements - the logo/title center top followed with two column listing of subtopics, creating a portrait view 
of the page. This site shows the touch of a professional design team in it*s overall appearance and use of graphic 
elements. The page*s layout makes use of appropriate white space which brings a realistic view to the “bulletin 
board** concept of the page design. 

Information on the page is concise and appropriately labeled, and the use of a color with the linked-text is 
consistent with the logo. The uses of realistic graphics, pushpins and strips of yellow legal pad paper, for buttons 
and masking tape for the navigational bar, gives the page depth. The graphic elements used are easy for the user to 
identify and associate with, but it is difficult time to picture how to put pushpins into a white marker board. A little 
texture to the background would give the realistic appearance of a white bulletin board. 

The design concept is carried through to the header graphic, a strip of masking tape, on linked pages. The 
home page is the only location on the site where the same header graphic is not used. The pushpin and paper theme 
is carried through on the linked pages for listings of subtopic information. The use of masking tape for the 
navigation bars on each, the home and linked pages, is consistent in its use 

Linked pages have a consistent pattern to the layout of the page - the logo in the upper left, graphics related 
to the topic to the right, followed with the masking tape header. Information below the header on these pages varied 
in amount and layout, but this was where the site showed it inconsistency. Some large amounts of information was 
listed with the pushpin/paper graphics, others the user had to scroll down. 

Conclusions 

With the growing cost associated with on-line access, the technical hardware and software needed to view 
web pages, the purpose of design has greater value for an informational sites. Understanding the relationship 
between available resources and page design is valuable in that it may helps explain that there is more to web pages 
than the technology that enables us to see them. For if a web page, and the available information on the WWW, is 
to be used to its fullest potential, the appropriate use of design of that page has value. For the purpose of design is 
to make sure that the information presented in a useful and clear manner has value. 

Preliminary data analysis indicates that the majority of the web pages use a simple design, with the 
standard blue and purple colors used for unvisited and visited sites. Few web pages contained clues that would 
indicate the size of the files in the site. The majority of web page backgrounds used distracting patterns and/or color. 
In many cases the designers seemed to forget to maintain message of the page. There was a tendency in most of the 
personal pages not to indicate the path the user is following. The user should be able to tell where he or she came 
from, how to go back and find his or her way around. Many sites did not indicate whether the site had been updated. 
This may lead the user to loose interest in the site. In many cases, graphics that looked like buttons were not. 

The use of thumbnail graphics was minimal. 
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Recommendations 

The next phase of this study is to perform an in-depth data analysis. Following that, a formal evaluation of 
the data should be completed. From a preliminary analysis, the following considerations merit investigation: 

• Should the elements of the visual arts, dot, line, color, text that have been standard for decades apply to the 
medium of on-line publications? 

• Which literary publication conventions should or should not be applied to the unique environment of web 
pages? 

• In what ways do the questions of interactivity, connection and interconnections, user control, and expeditious 
information gathering contribute to new publishing conventions? 

• How does the relationship of not knowing how a publication is structured impact the ability to communicate? 

Most certianly there is rapid growth to be expected in the WWW envrionment an guidelines are needed to 
help people develop the most effective pages for communication and for instructional purposes. Resources that 
address the technical aspects of creating WWW pages fall short of those needs, yet consumers may not realize the 
need for training in this area. Educators who are pressed to learn new technical skills yet have increased 
responsibilites which lead to extremely short amounts of time available, may find that partnerships with commercial 
enterprises will be particularly helpful as schools move into more WWW communication. 
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